<template>
  <div
    class="intro"
    v-if="playlist"
    :style="{ backgroundImage: 'url(' + playlist.coverImgUrl + ')' }"
  >
    <div class="zhezhao"></div>
    <img :src="playlist.coverImgUrl" alt="" />
    <div class="introRight">
      <span> 更新于{{ playlist.createTime | formateTime }} </span>
      <h2>
        {{ playlist.name }}
      </h2>
    </div>
  </div>
</template>

<script>
export default {
  name: "Poster",
  props: {
    playlist: Object,
  },
  filters: {
    formateTime(val) {
      let d = new Date(val);
      return d.getMonth() + 1 + "月" + d.getDate() + "日";
    },
  },
};
</script>

<style lang="less" scoped>
.intro {
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  .zhezhao {
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
    opacity: 0.25;
  }
  img {
    height: 115px;
    width: 115px;
    border-radius: 10px;
    position: absolute;
    left: 35px;
    top: 45px;
    border: 0px solid white;
  }
  .introRight {
    overflow: hidden;
    position: absolute;
    left: 170px;
    top: 45px;
    padding-right: 20px;
    h2,
    span {
      color: white;
      font-weight: 400;
      z-index: 5;
      font-size: 19px;
    }
    h2 {
    }
    span {
      display: inline-block;
      background-color: #f4d160;
      border-radius: 15px;
      padding: 0px 8px;
      color: #6d6d6d;
      height: 23px;
      line-height: 25px;
      font-size: 15px;
      margin-bottom: 8px;
      width: 125px;
      text-align: center;
      box-sizing: border-box;
    }
  }
}
.intro::before {
  content: "";
  height: 220px;
  width: 100%;
  position: absolute;
  left: 0;
  top: -10px;
  background: inherit;
  filter: blur(10px);
}
</style>